
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>养殖监测</title>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-slider.css" />
    <link rel="stylesheet" type="text/css" href="../../lib/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/gis.css" />
    <link rel="stylesheet" href="../../css/mycover.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <style>
        html,
        body,
        #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        .options-panel {
            font: 20px helvetica, sans-serif;
            background-color: #fff;
            position: absolute;
            right: 20px;
            top: 10px;
            padding: 10px;
            border: 1px solid #544F4F;
            z-index: 10000;
            text-align: center;
        }

        input[type="text"] {
            margin-bottom: 0;
        }

        li {
            line-height: 37px;
        }

        ul {
            margin: 0;
            list-style-type: none;
        }

        body .demo-class .layui-layer-content {
            background: rgba(0, 0, 0, 0.5);
        }

        body .lucc-toc .layui-layer-content {
            background: rgba(0, 0, 0, 0.5);
        }

        body .wenchang .layui-layer-content {
            background: #fff;
        }

        .layui-form-checkbox[lay-skin=primary] {
            padding: 5px;
        }

        .esriLegendLayerLabel {
            width: auto;
            margin-left: 5px;
        }

        .esriLegendServiceLabel {
            margin: 5px;
        }

        .menu-btn {
            position: absolute;
            left: 70px;
            top: 20px;
            display: none;
        }

        .device-table {
            position: absolute;
            left: 70px;
            top: 58px;
            display: none;
        }

        #exChart-div {
            position: absolute;
            top: 50px;
            right: 5px;
            width: 340px;
            height: 230px;
            background-color: rgba(0, 0, 0, 0.7);
            border: 1px solid #034c6a;
            box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
            0px -10px 15px #034c6a inset, /*上边阴影*/
            10px 0px 15px #034c6a inset, /*右边阴影*/
            0px 10px 15px #034c6a inset;
            display: none;
        }

        #exChart {
            width: calc(100% - 20px);
            height: calc(100% - 20px);
            padding: 10px
        }
    </style>
    <script>
        var curPath = window.document.location.href;
        var package_path = curPath.substring(0, curPath.lastIndexOf("/"));
        var dojoConfig = {
            packages: [{
                name: 'measure',
                location: package_path + '/lib/measure'
            }],
            parseOnLoad: false
        };
    </script>
    <script type="text/javascript" src="../../js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.js"></script>
    <script type="text/javascript" src="../../js/bootstrap-slider.js"></script>
    <script type="text/javascript" src="../../lib/layer/layer.js"></script>
    <script type="text/javascript" src="../../lib/echarts/echarts.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui.js"></script>
    <script src="https://js.arcgis.com/3.46/init.js"></script>
    <script>
        var map;
        var veclay;
        var feclay;
        var legend;
        var baseimg1, baseimg2;
        var img = {};
        var sdidx;
        var featurelay; //实地图片图层
        var jclay; //监测站点
        var mySlider //历史影像滑动条

        require(["dojo/dom",
            "dojo/query",
            "dojo/on",
            "esri/map",
            "esri/toolbars/navigation",
            "esri/layers/FeatureLayer",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "measure/MeasureTools",
            "esri/InfoTemplate",
            "esri/tasks/query",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/geometry/Polygon",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/SpatialReference",
            "esri/graphic",
            "esri/layers/GraphicsLayer",
            "esri/Color",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/graphicsUtils",
            "esri/renderers/SimpleRenderer",
            "esri/dijit/Legend",
            "dojo/domReady!"
        ], function(
            dom,
            query,
            on,
            Map,
            Navigation,
            FeatureLayer,
            ArcGISDynamicMapServiceLayer,
            ArcGISTiledMapServiceLayer,
            MeasureTools,
            InfoTemplate,
            Query,
            Point,
            Polyline,
            Polygon,
            SimpleLineSymbol,
            SimpleFillSymbol,
            SpatialReference,
            Graphic,
            GraphicsLayer,
            Color,
            SimpleMarkerSymbol,
            PictureMarkerSymbol,
            graphicsUtils,
            SimpleRenderer,
            Legend) {
            map = new Map("mapDiv", { logo: false });
            var baseLay = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/Hainan_15m/MapServer");
            //var baseLay = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/BHQ/JL_15m/MapServer");
            map.addLayer(baseLay, 0);
            //map.addLayer(baseLay,11);

            map.on("load", function() {
                navToolbar = new Navigation(map);
                query(".navItem img").onclick(function(evt) {
                    navEvent(evt.target.parentNode.id);
                });
                // 将漫游设置为默认操作
                navEvent('deactivate');
            });

            //测量工具
            var measureTool = new MeasureTools({
                map: map
            }, "measureTools");

            //地图工具
            function navEvent(id) {
                map.graphics.clear();
                switch (id) {
                    case 'pan':
                        map.enablePan();
                        navToolbar.activate(Navigation.PAN);
                        navOption = id;
                        break;
                    case 'zoomprev':
                        navToolbar.zoomToPrevExtent();
                        break;
                    case 'zoomnext':
                        navToolbar.zoomToNextExtent();
                        break;
                    case 'extent':
                        navToolbar.zoomToFullExtent();
                        break;
                    case 'zoomin':
                        navToolbar.activate(Navigation.ZOOM_IN);
                        navOption = id;
                        break;
                    case 'zoomout':
                        navToolbar.activate(Navigation.ZOOM_OUT);
                        navOption = id;
                        break;
                    case 'deactivate':
                        navToolbar.deactivate();
                        navOption = id;
                        break;
                }
            }

            //region实地照片展示
            featurelay = new FeatureLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/KCPoint/MapServer/0", {
                outFields: ["*"]
            });
            map.addLayer(featurelay);
            featurelay.on("click", function(evt) {
                if (sdidx) { layer.close(sdidx); }
                console.log(evt);
                var picname = evt.graphic.attributes.name;
                sdidx = layer.open({
                    skin: 'demo-class',
                    title: '实地图',
                    type: 1,
                    area: ['410px', '300px'],
                    offset: [evt.y, evt.x],
                    shadeClose: true,
                    shade: false,
                    content: '<img src="images/picture/' + picname + '.jpg" style="width:100%; height:100%">',
                });
            });

            var symbol = new SimpleMarkerSymbol(
                SimpleMarkerSymbol.STYLE_CIRCLE,
                9,
                new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_NULL,
                    new Color([247, 34, 101, 0.9]),
                    1
                ),
                new Color([207, 34, 171, 0.9])
            );
            featurelay.setSelectionSymbol(symbol);

            var nullSymbol = new SimpleMarkerSymbol().setSize(0);
            featurelay.setRenderer(new SimpleRenderer(nullSymbol));
            //endregion

            //clear();
            //addsc();
            addHunChunKouAnMap();
            /*document.getElementById("yzfb").addEventListener("click",function(){
                console.log("hehe");
                clear();
                addsc();
            });*/

            /*on(parent.document.getElementById("sub11"), "click", function() {
                clear();
                wenchanghe();
            });

            on(parent.document.getElementById("sub41"), "click", function() {
                clear();
                addsc();
            });

            on(parent.document.getElementById("sub42"), "click", function() {
                clear();
                addls();
            });

            on(parent.document.getElementById("sub43"), "click", function() {
                clear();
                addpw();
            });

            on(parent.document.getElementById("sub51"), "click", function() {
                clear();
                addsc1();
            });

            on(parent.document.getElementById("sub52"), "click", function() {
                clear();
                addls1();
            });*/

            //文昌河案例
            function wenchanghe(){
                document.getElementById("wc-anli").style.display = "block";
                var point = new esri.geometry.Point({ "x": 110.754, "y": 19.619, "spatialReference": { "wkid": 4326 } });
                map.centerAndZoom(point, 15);

                baseimg1 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/0830WCH/MapServer");
                map.addLayer(baseimg1);

                jclay = new FeatureLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/JCZD/MapServer/0",{
                    outFields: ["*"]
                });
                map.addLayer(jclay);
                jclay.on("click",function(evt){
                    var name = evt.graphic.attributes.name;
                    layer.closeAll();
                    deviceInfo(name);
                });
            }

            //排污许可证
            function addpw() {
                var point = new esri.geometry.Point({ "x": 110.722, "y": 19.417, "spatialReference": { "wkid": 4326 } });
                map.centerAndZoom(point, 14);

                baseimg1 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20180512/MapServer");
                veclay = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/PWQY/MapServer");
                map.addLayer(baseimg1);
                map.addLayer(veclay);

                idx = layer.open({
                    skin: 'demo-class',
                    title: '排污许可管理',
                    type: 2,
                    maxmin: true,
                    offset: 'lb',
                    closeBtn: 0,
                    area: ['800px', '400px'],
                    shadeClose: true,
                    shade: false,
                    content: 'subpage/xklist.html',
                });
                console.log(veclay);
            }

            //还原地图
            function clear() {
                if (baseimg1) { map.removeLayer(baseimg1); }
                if (baseimg2) { map.removeLayer(baseimg2); }
                if (veclay) { map.removeLayer(veclay); }
                document.getElementById("slid").style.display = "none";
                document.getElementById("exChart-div").style.display = "none";
                document.getElementById("wc-anli").style.display = "none";
                document.getElementById("dt-table").style.display = "none";
                dtstate = false;

                if(mySlider){$("#ex13").slider('destroy'); mySlider = null;}

                if (img.lay1) { map.removeLayer(img.lay1);}
                if (img.lay2) { map.removeLayer(img.lay2);}
                if (img.lay3) { map.removeLayer(img.lay3);}
                if (img.lay4) { map.removeLayer(img.lay4);}
                if (img.lay5) { map.removeLayer(img.lay5);}
                if (img.lay6) { map.removeLayer(img.lay6);}
                if (img.lay7) { map.removeLayer(img.lay7);}
                if (img.lay8) { map.removeLayer(img.lay8);}
                if (img.lay9) { map.removeLayer(img.lay9);}
                img = {};

                layer.closeAll();
                if (featurelay) { featurelay.setVisibility(false); }
                if (jclay) { map.removeLayer(jclay); }
                if(graphiclay){ graphiclay.setVisibility(false); }
            }

            //添加历史影像
            var graphiclay = new GraphicsLayer({ visible: false });
            var p1 = new esri.geometry.Point({ "x": 110.7201, "y": 19.4143, "spatialReference": { "wkid": 4326 } });
            var p2 = new esri.geometry.Point({ "x": 110.7197, "y": 19.4137, "spatialReference": { "wkid": 4326 } });
            graphiclay.add(new Graphic(p1,symbol,{id:1}));
            graphiclay.add(new Graphic(p2,symbol,{id:2}));
            graphiclay.on("click",function(evt){
                if (sdidx) { layer.close(sdidx); }
                var id = evt.graphic.attributes.id;
                sdidx = layer.open({
                    skin: 'demo-class',
                    title: '放大图',
                    type: 1,
                    area: ['410px', '300px'],
                    offset: [evt.y, evt.x],
                    shadeClose: true,
                    shade: false,
                    content: '<img src="images/max/' + id + '.jpg" style="width:100%; height:100%">',
                });
            });

            function addls() {
                var point = new esri.geometry.Point({ "x": 110.722, "y": 19.417, "spatialReference": { "wkid": 4326 } });
                map.centerAndZoom(point, 14);
                img.lay1 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20090822/MapServer", { visible: false });
                img.lay2 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20131231/MapServer", { visible: false });
                img.lay3 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20140926/MapServer", { visible: false });
                img.lay4 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20150511/MapServer", { visible: false });
                img.lay5 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20160318/MapServer", { visible: false });
                img.lay6 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20161114/MapServer", { visible: false });
                img.lay7 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20180512/MapServer", { visible: false });
                img.lay8 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/2018827/MapServer", { visible: false });
                img.lay9 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20181005/MapServer", { visible: false });
                map.addLayer(img.lay1);
                map.addLayer(img.lay2);
                map.addLayer(img.lay3);
                map.addLayer(img.lay4);
                map.addLayer(img.lay5);
                map.addLayer(img.lay6);
                map.addLayer(img.lay7);
                map.addLayer(img.lay8);
                map.addLayer(graphiclay);
                map.addLayer(img.lay9);

                img.lay1.on("load", function() {
                    sub42();
                });
            }

            //历史影像
            function sub42() {
                document.getElementById("slid").style.display = "block";
                map.setExtent(img.lay1.fullExtent);
                img.lay1.setVisibility(true);
                mySlider = $("#ex13").slider({
                    ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8],
                    ticks_snap_bounds: 1,
                    formatter: function(value) {
                        switch (value) {
                            case 0:
                                return '2009-08-22';
                            case 1:
                                return '2013-12-31';
                            case 2:
                                return '2014-09-26';
                            case 3:
                                return '2015-05-11';
                            case 4:
                                return '2016-03-18';
                            case 5:
                                return '2016-11-14';
                            case 6:
                                return '2018-05-02';
                            case 7:
                                return '2018-08-27';
                            case 8:
                                return '2018-10-05';
                        }
                    }
                }).on("change", function(e) {
                    switch (e.value.newValue) {
                        case 0:
                            img.lay1.setVisibility(true);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            img.lay7.setVisibility(false);
                            img.lay8.setVisibility(false);
                            graphiclay.setVisibility(false);
                            img.lay9.setVisibility(false);
                            break;
                        case 1:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(true);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            img.lay7.setVisibility(false);
                            img.lay8.setVisibility(false);
                            graphiclay.setVisibility(false);
                            img.lay9.setVisibility(false);
                            break;
                        case 2:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(true);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            img.lay7.setVisibility(false);
                            img.lay8.setVisibility(false);
                            graphiclay.setVisibility(false);
                            img.lay9.setVisibility(false);
                            break;
                        case 3:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(true);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            img.lay7.setVisibility(false);
                            img.lay8.setVisibility(false);
                            graphiclay.setVisibility(false);
                            img.lay9.setVisibility(false);
                            break;
                        case 4:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(true);
                            img.lay6.setVisibility(false);
                            img.lay7.setVisibility(false);
                            img.lay8.setVisibility(false);
                            graphiclay.setVisibility(false);
                            img.lay9.setVisibility(false);
                            break;
                        case 5:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(true);
                            img.lay7.setVisibility(false);
                            img.lay8.setVisibility(false);
                            graphiclay.setVisibility(false);
                            img.lay9.setVisibility(false);
                            break;
                        case 6:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            img.lay7.setVisibility(true);
                            img.lay8.setVisibility(false);
                            graphiclay.setVisibility(false);
                            img.lay9.setVisibility(false);
                            break;
                        case 7:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            img.lay7.setVisibility(false);
                            img.lay8.setVisibility(true);
                            graphiclay.setVisibility(true);
                            img.lay9.setVisibility(false);
                            break;
                        case 8:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            img.lay7.setVisibility(false);
                            img.lay8.setVisibility(false);
                            graphiclay.setVisibility(false);
                            img.lay9.setVisibility(true);
                            break;
                    }
                });

                console.log(mySlider);
            }

            function addls1() {
                var point = new esri.geometry.Point({ "x": 110.801, "y": 19.523, "spatialReference": { "wkid": 4326 } });
                map.centerAndZoom(point, 15);
                img.lay1 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/GL20091005/MapServer", { visible: false });
                img.lay2 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20131201/MapServer", { visible: false });
                img.lay3 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20150805/MapServer", { visible: false });
                img.lay4 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20160407/MapServer", { visible: false });
                img.lay5 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20170911/MapServer", { visible: false });
                img.lay6 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20180515/MapServer", { visible: false });
                map.addLayer(img.lay1);
                map.addLayer(img.lay2);
                map.addLayer(img.lay3);
                map.addLayer(img.lay4);
                map.addLayer(img.lay5);
                map.addLayer(img.lay6);

                img.lay1.on("load", function() {
                    sub52();
                });
            }

            //高隆湾历史影像
            function sub52() {
                document.getElementById("slid").style.display = "block";
                map.setExtent(img.lay1.fullExtent);
                img.lay1.setVisibility(true);
                mySlider = $("#ex13").slider({
                    ticks: [0, 1, 2, 3, 4, 5],
                    ticks_snap_bounds: 1,
                    formatter: function(value) {
                        switch (value) {
                            case 0:
                                return '2009-10-05';
                            case 1:
                                return '2013-12-01';
                            case 2:
                                return '2015-08-05';
                            case 3:
                                return '2016-04-07';
                            case 4:
                                return '2017-09-11';
                            case 5:
                                return '2018-05-15';
                        }
                    }
                }).on("change", function(e) {
                    switch (e.value.newValue) {
                        case 0:
                            img.lay1.setVisibility(true);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            break;
                        case 1:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(true);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            break;
                        case 2:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(true);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            break;
                        case 3:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(true);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(false);
                            break;
                        case 4:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(true);
                            img.lay6.setVisibility(false);
                            break;
                        case 5:
                            img.lay1.setVisibility(false);
                            img.lay2.setVisibility(false);
                            img.lay3.setVisibility(false);
                            img.lay4.setVisibility(false);
                            img.lay5.setVisibility(false);
                            img.lay6.setVisibility(true);
                            break;
                    }
                });
            }

            //珲春口岸基础地理信息展示
            function addHunChunKouAnMap() {
                var point = new esri.geometry.Point({ "x": 130.37, "y": 42.74, "spatialReference": { "wkid": 4326 } });
                map.centerAndZoom(point, 11);

                /*baseimg1 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20160318/MapServer", { id: "20160318影像" });
                baseimg2 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20180512/MapServer", { id: "20180502影像", visible: false });

                map.addLayer(baseimg2);
                map.addLayer(baseimg1);*/

                //veclay = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer/");
                veclay = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/HunchunFeatures/MapServer/");
                map.addLayer(veclay);

                //实地查勘图层
                /*featurelay.setVisibility(true);
                var query = new Query();
                query.where = "name like '%e%'";
                featurelay.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(evt) {
                    console.log(evt);
                });*/

                veclay.on("load", function() {
                    var layerString = '';
                    var bLayers = veclay.layerInfos;
                    $.ajax({
                        //url: "http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer/legend?f=pjson",
                        url: "http://202.111.178.10:61236/arcgis/rest/services/71KT5/HunchunFeatures/MapServer/legend?f=pjson",
                        type: "GET",
                        dataType: "jsonp",
                        success: function(data) {
                            var lgl = data.layers;
                            //console.log(data);
                            var baseurl = "data:image/png;base64,";
                            for (var i = 0; i < bLayers.length; i++) {
                                var currentSubLayer = bLayers[i];
                                var nexturl = lgl[i].legend[0].imageData;
                                layerString += '<img src="' + baseurl + nexturl + '">' + '<input type="checkbox" id="' + currentSubLayer.id + '" title="' + currentSubLayer.name + '" lay-skin="primary"' + (currentSubLayer.defaultVisibility ? " CHECKED " : "") + '><br>';
                            }
                            //layerString += '<input type="checkbox" id="' + baseimg1.id + '" title="' + baseimg1.id + '" lay-skin="primary"' + (baseimg1.visible ? " CHECKED " : "") + '><br>';
                            //layerString += '<input type="checkbox" id="' + baseimg2.id + '" title="' + baseimg2.id + '" lay-skin="primary"' + (baseimg2.visible ? " CHECKED " : "") + '><br>';
                            idx = layer.open({
                                //skin: 'demo-class',
                                title: '图层',
                                closeBtn: 0,
                                type: 1,
                                area: ['345px', ''],
                                offset: 'rb',
                                shadeClose: true,
                                shade: false,
                                content: '<div class="layui-form">' +
                                layerString +
                                '</div>',
                                success: function() {
                                    startTC();
                                }
                            });
                            /*layer.style(idx, {
                                color:'red'
                            });*/
                        }
                    });

                });
                showchart(['20160318', '20180512', '新增数量', '减少数量'],[884, 874, 23, 33]);
            }

            //阳光村鱼塘监测
            function addsc() {
                var point = new esri.geometry.Point({ "x": 110.722, "y": 19.417, "spatialReference": { "wkid": 4326 } });
                map.centerAndZoom(point, 14);

                baseimg1 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20160318/MapServer", { id: "20160318影像" });
                baseimg2 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20180512/MapServer", { id: "20180502影像", visible: false });

                map.addLayer(baseimg2);
                map.addLayer(baseimg1);
                veclay = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/LTYT/MapServer");
                map.addLayer(veclay);

                featurelay.setVisibility(true);
                var query = new Query();
                query.where = "name like '%e%'";
                featurelay.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(evt) {
                    console.log(evt);
                });

                veclay.on("load", function() {
                    var layerString = '';
                    var bLayers = veclay.layerInfos;
                    $.ajax({
                        url: "http://202.111.178.10:36080/arcgis/rest/services/HNYGC/LTYT/MapServer/legend?f=pjson",
                        type: "GET",
                        dataType: "jsonp",
                        success: function(data) {
                            var lgl = data.layers;
                            console.log(data);
                            var baseurl = "data:image/png;base64,";
                            for (var i = 0; i < bLayers.length; i++) {
                                var currentSubLayer = bLayers[i];
                                var nexturl = lgl[i].legend[0].imageData;
                                layerString += '<img src="' + baseurl + nexturl + '">' + '<input type="checkbox" id="' + currentSubLayer.id + '" title="' + currentSubLayer.name + '" lay-skin="primary"' + (currentSubLayer.defaultVisibility ? " CHECKED " : "") + '><br>';
                            }
                            layerString += '<input type="checkbox" id="' + baseimg1.id + '" title="' + baseimg1.id + '" lay-skin="primary"' + (baseimg1.visible ? " CHECKED " : "") + '><br>';
                            layerString += '<input type="checkbox" id="' + baseimg2.id + '" title="' + baseimg2.id + '" lay-skin="primary"' + (baseimg2.visible ? " CHECKED " : "") + '><br>';
                            idx = layer.open({
                                skin: 'demo-class',
                                title: '图层',
                                closeBtn: 0,
                                type: 1,
                                area: ['370px', '200px'],
                                offset: 'rb',
                                shadeClose: true,
                                shade: false,
                                content: '<div class="layui-form">' +
                                layerString +
                                '</div>',
                                success: function() {
                                    startTC();
                                }
                            });
                        }
                    });

                });
                showchart(['20160318', '20180512', '新增数量', '减少数量'],[884, 874, 23, 33]);
            }


            //高隆湾鱼塘监测
            function addsc1() {
                var point = new esri.geometry.Point({ "x": 110.801, "y": 19.523, "spatialReference": { "wkid": 4326 } });
                map.centerAndZoom(point, 15);

                baseimg1 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20160407/MapServer", { id: "20160407影像" });
                baseimg2 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/20180515/MapServer", { id: "20180515影像", visible: false });

                map.addLayer(baseimg2);
                map.addLayer(baseimg1);
                veclay = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/HNYGC/GLWYXT/MapServer");
                map.addLayer(veclay);

                veclay.on("load", function() {
                    var layerString = '';
                    var bLayers = veclay.layerInfos;
                    $.ajax({
                        url: "http://202.111.178.10:36080/arcgis/rest/services/HNYGC/GLWYXT/MapServer/legend?f=pjson",
                        type: "GET",
                        dataType: "jsonp",
                        success: function(data) {
                            var lgl = data.layers;
                            console.log(data);
                            var baseurl = "data:image/png;base64,";
                            for (var i = 0; i < bLayers.length; i++) {
                                var currentSubLayer = bLayers[i];
                                var nexturl = lgl[i].legend[0].imageData;
                                layerString += '<img src="' + baseurl + nexturl + '">' + '<input type="checkbox" id="' + currentSubLayer.id + '" title="' + currentSubLayer.name + '" lay-skin="primary"' + (currentSubLayer.defaultVisibility ? " CHECKED " : "") + '><br>';
                            }
                            layerString += '<input type="checkbox" id="' + baseimg1.id + '" title="' + baseimg1.id + '" lay-skin="primary"' + (baseimg1.visible ? " CHECKED " : "") + '><br>';
                            layerString += '<input type="checkbox" id="' + baseimg2.id + '" title="' + baseimg2.id + '" lay-skin="primary"' + (baseimg2.visible ? " CHECKED " : "") + '><br>';
                            idx = layer.open({
                                skin: 'demo-class',
                                title: '图层',
                                closeBtn: 0,
                                type: 1,
                                area: ['370px', '200px'],
                                offset: 'rb',
                                shadeClose: true,
                                shade: false,
                                content: '<div class="layui-form">' +
                                layerString +
                                '</div>',
                                success: function() {
                                    startTC();
                                }
                            });
                        }
                    });

                });

            }

        });

        function showchart(x,y) {
            document.getElementById("exChart-div").style.display = "block";
            var myChart = echarts.init(document.getElementById('exChart'));
            option = {
                title: {
                    text: '数量变化',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    axisLabel: { //调整x轴的lable
                        textStyle: {
                            color: '#fff'
                        },
                        interval: 0,
                        rotate: -30
                    },
                    data: x
                },
                yAxis: {
                    type: 'value',
                    axisLabel: { //调整x轴的lable
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                grid: {
                    left: '14%'
                },
                series: [{
                    data: y,
                    type: 'bar',
                    barWidth: '30px'
                }]
            };
            myChart.setOption(option);
        }

        function startTC() {
            layui.use('form', function() {
                var form = layui.form;
                form.render();
                form.on('checkbox', function(data) {
                    console.log(data);
                    if (data.elem.id == "20160318影像") {
                        if (data.elem.checked) {
                            baseimg1.setVisibility(true);
                            return;
                        } else {
                            baseimg1.setVisibility(false);
                            return;
                        }
                    }

                    if (data.elem.id == "20180502影像") {
                        if (data.elem.checked) {
                            baseimg2.setVisibility(true);
                            return;
                        } else {
                            baseimg2.setVisibility(false);
                            return;
                        }
                    }
                    if (data.elem.id == "20160407影像") {
                        if (data.elem.checked) {
                            baseimg1.setVisibility(true);
                            return;
                        } else {
                            baseimg1.setVisibility(false);
                            return;
                        }
                    }

                    if (data.elem.id == "20180515影像") {
                        if (data.elem.checked) {
                            baseimg2.setVisibility(true);
                            return;
                        } else {
                            baseimg2.setVisibility(false);
                            return;
                        }
                    }

                    var checkedId = [];
                    var checkedLayer = $(".layui-form-checked");
                    for (var i = 0; i < checkedLayer.length; i++) {
                        checkedId.push(checkedLayer[i].previousSibling.id);
                    }
                    veclay.setVisibleLayers(checkedId);
                });
            });
        }

        var dtstate = false;

        function showdt() {
            if (dtstate) {
                document.getElementById("dt-table").style.display = "none";
                dtstate = false;
            } else {
                document.getElementById("dt-table").style.display = "block";
                dtstate = true;
            }

        }

        function deviceInfo(name) {
            layer.open({
                skin: 'wenchang',
                title: name,
                type: 2,
                offset: 'lb',
                area: ['580px', '303px'],
                shadeClose: true,
                shade: false,
                content: 'a-TJ.html'
            });
        }

        function centerPoint() {
            var point = new esri.geometry.Point({ "x": 110.7119, "y": 19.4204, "spatialReference": { "wkid": 4326 } });
            map.centerAndZoom(point, 17);
        }
    </script>
</head>

<body class="tundra">
<div style="position: absolute; right:0; top:5px; z-index: 10;">
    <div id="navDiv1" style="float: right; overflow: hidden; padding: 0px; border: 0px;">
        <div id="pan" class="navItem" style="margin-right: 3px; overflow: hidden; float:right;">
            <img title="漫游" src="../../images/mapctrl/hand.png" />
        </div>
        <div id="zoomnext" class="navItem">
            <img src="../../images/mapctrl/right.png" title="后一视图" />
        </div>
        <div id="zoomprev" class="navItem">
            <img src="../../images/mapctrl/left.png" title="前一视图" />
        </div>
        <div id="extent" class="navItem">
            <img src="../../images/mapctrl/web.png" title="全图显示" />
        </div>
        <div id="zoomout" class="navItem">
            <img src="../../images/mapctrl/zoomout.png" title="地图缩小" />
        </div>
        <div id="zoomin" class="navItem">
            <img src="../../images/mapctrl/zoomin.png" title="地图放大" />
        </div>
        <div id="measureTools" class="navItem measure">
            <img src="../../images/mapctrl/ruler.png" title="地图测量" />
            <ul class="drop-down-content">
                <li><a href="javascript:;" class="measure-distance">距离测量</a></li>
                <li><a href="javascript:;" class="measure-area">面积测量</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="mapDiv"></div>
<div class="layui-btn-group menu-btn" id="wc-anli">
    <button class="layui-btn layui-btn-normal" onclick="showdt()">监测点列表</button>
</div>
<div class="device-table" id="dt-table">
    <table class="layui-table" style="margin:0">
        <thead>
        <tr>
            <th>编号</th>
            <th>监测站点</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>人民桥</td>
            <td>
                <button class="layui-btn layui-btn-xs" onclick="deviceInfo('人民桥监测点');">详情</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>文东桥</td>
            <td>
                <button class="layui-btn layui-btn-xs">详情</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>北二坝</td>
            <td>
                <button class="layui-btn layui-btn-xs">详情</button>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>南二坝</td>
            <td>
                <button class="layui-btn layui-btn-xs">详情</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div id="slid" style="position: absolute;z-index: 999;top: 60px;left: 30%;width: 40%; display: none">
    <input id="ex13" type="text" style="width: 100%;" data-slider-value="0" data-slider-step="1" />
</div>
<div id="exChart-div">
    <div id="exChart"></div>
</div>
</body>

</html>